<template>
  <div style="padding: 30px">
    <el-row :gutter="10">
      <area-cascader
        v-model="address"
        :data="$pcaa"
        :level="1"
        @change="handleChange"
      />
      <el-col :lg="8" :span="7" />
      <el-col :lg="5"
        ><el-select v-model="area" placeholder="请选择" @change="handleArea">
          <el-option
            v-for="item in areaData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          /> </el-select
      ></el-col>
      {{ address }}{{ faddress }}
    </el-row>
    <hr />
    <el-row :gutter="10">
      <el-cascader
        v-if="show"
        v-model="value"
        :options="options"
        @change="handleChange"
      />
      {{ value }}
      <el-button type="primary" @click="handel">可以切换成默认地址</el-button>
      <el-tag
        >生成随机且不重复的ID!可以解决key值重复问题：{{
          createRandomId
        }}待验证</el-tag
      >
    </el-row>
  </div>
</template>

<script>
let id = 0;
export default {
  name: "Menu3menu",
  data() {
    return {
      address: ["360000", "360900", "360982"],
      areaData: [],
      area: "",
      faddress: [],
      value: ["360000", "360900", "360982", "360982004"],
      options: [],
      show: true,
      input: "",
      timeG: [],
      courierNumber: "",
    };
  },
  computed: {
    createRandomId() {
      return (
        (Math.random() * 10000000).toString(16).substr(0, 4) +
        "-" +
        new Date().getTime() +
        "-" +
        Math.random().toString().substr(2, 5)
      );
    },
  },
  mounted() {
    this.options = this.PaccMap(this.$pcaa, 4);
  },
  methods: {
    //   点击得到的数据
    handleData() {
      console.log(this.$pcaa);
      return [];
    },
    handleChange() {
      this.areaData = [];
      this.area = "";
      const arr = this.$pcaa[this.address[2]];
      for (const k in arr) {
        this.areaData.push({ value: k, label: arr[k] });
      }
      this.faddress = JSON.parse(JSON.stringify(this.address));
    },
    handleArea(v) {
      this.faddress[3] = v;
    },
    // Map数据源
    PaccMap(d, index) {
      const arr = [];
      for (const item in d["86"]) {
        arr.push({
          label: d["86"][item],
          value: item,
          leaf: true,
        });
      }
      arr.forEach((eitem) => {
        eitem.children = [];
        for (const evalue in d[eitem.value]) {
          eitem.children.push({
            label: d[eitem.value][evalue],
            value: evalue,
            leaf: true,
          });
        }
        eitem.children.forEach((titem) => {
          titem.children = [];
          for (const tvalue in d[titem.value]) {
            titem.children.push({
              label: d[titem.value][tvalue],
              value: tvalue,
              leaf: true,
            });
          }
          if (index === 3) return;
          titem.children.forEach((fitem) => {
            fitem.children = [];
            for (const fvalue in d[fitem.value]) {
              fitem.children.push({
                label: d[fitem.value][fvalue],
                value: fvalue,
                leaf: false,
              });
            }
          });
        });
      });
      return arr;
    },
    handel() {
      this.show = false;
      setTimeout(() => {
        this.show = true;
        this.value = ["360000", "360600", "360603", "360603102"];
      });
    },
  },
};
</script>

<style></style>
